<!--此页面为布局页面，分为头部的搜索区和功能按钮区及中间的列表区，底部用于放分页-->

<template>
  <div class="list-page-container-root">
    <!--头部容器-->
    <div class="header" v-if="$slots.query || $slots.handel"
         :style="{height:`${($slots.query ? 40 : 0) + ($slots.handel ? 40 : 0) + ($slots.query && $slots.handel ? 5 : 0)}px`}">
      <div class="query" v-if="$slots.query || $slots.rowHandel">
        <div class="query-form" v-if="$slots.query">
          <slot name="query"></slot>
        </div>
        <div class="row-bt" v-if="$slots.rowHandel">
          <slot name="rowHandel"></slot>
        </div>
      </div>

      <!--该插槽内放新增删除导出等功能-->
      <div class="bt" v-if="$slots.handel">
        <slot name="handel"></slot>
      </div>
    </div>
    <!--表格容器-->
    <div
        :style="{height:`calc(100% - ${($slots.query || $slots.rowHandel ? 40 : 0) + ($slots.handel ? 40 : 0) + ($slots.query || $slots.rowHandel || $slots.handel ? 5 : 0) + (($slots.pageDisplay ? 50 : 0))}px)`}"
        class="table-container">
      <!--该插槽内用于放表格部分-->
      <slot name="table" v-if="$slots.table"></slot>
      <el-empty v-else description="暂无数据"></el-empty>
    </div>
    <!--分页容器-->
    <div class="pagination-display" v-if="$slots.pageDisplay">
      <!--该插槽内用于放分页部分-->
      <slot name="pageDisplay"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "index"
}
</script>

<style lang="scss" scoped>
@import "@/assets/style/businessTheme.scss";

.list-page-container-root {
  height: 100%;
  width: 100%;
  overflow: hidden;

  .header, .table-container, .pagination-display {
    width: 100%;
  }

  .header {
    height: 85px;
    margin-bottom: 5px; //设置与下方表格的间距

    .query {
      width: 100%;
      display: flex;

      .query-form {
        flex: 1;
      }

      .row-bt {
        width: max-content;
        height: 100%;
      }

      ::v-deep .el-form-item__label {
        display: none;
      }

      ::v-deep .el-button {
        height: 32px;

        &.el-button--primary {
          background: $bt-color;
          border: none;
        }
      }
    }
  }

  .table-container {
    height: calc(100% - 135px);
  }

  .pagination-display {
    height: 50px;
    display: flex;
    justify-content: flex-end;
  }
}
</style>
